<template>
  <div id="userManagePage">
    <a-input-search
      style="max-width: 320px; margin-bottom: 20px"
      v-model="searchUser"
      size="large"
      placeholder="请输入用户名"
      search-button
      @search="fetchData"
    />
    <a-table :columns="columns" :data="data">
      <template #gender="{ record }">
        {{ (record.gender ?? "") == 0 ? "男" : "女" }}
      </template>
      <template #role="{ record }">
        <div v-if="record.userRole">
          <a-tag color="green">管理员</a-tag>
        </div>
        <div v-else>
          <a-tag color="blue">普通用户</a-tag>
        </div>
      </template>
      <template #createTime="{ record }">
        {{ dayjs(record.createTime).format("YYYY-MM-DD hh:mm:ss") }}
      </template>
      <template #avatar="{ record }">
        <template v-if="record.avatarUrl">
          <a-image :src="record.avatarUrl" :width="120" />
        </template>
      </template>
      <template #optional="{ record }">
        <a-button status="danger" @click="doDelete(record.id)">删除</a-button>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { deleteUser, searchUsers } from "@/api/user";
import message from "@arco-design/web-vue/es/message";
import dayjs from "dayjs";

const searchUser = ref("");

const columns = [
  {
    title: "id",
    dataIndex: "id",
  },
  {
    title: "用户名",
    dataIndex: "username",
  },
  {
    title: "账号",
    dataIndex: "userAccount",
  },
  {
    title: "头像",
    slotName: "avatar",
  },
  {
    title: "性别",
    slotName: "gender",
  },
  {
    title: "创建时间",
    slotName: "createTime",
  },
  {
    title: "用户角色",
    slotName: "role",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];

const data = ref([]);

const fetchData = async () => {
  const res = await searchUsers(searchUser.value);
  if (res.data.code === 0 && res.data.data) {
    data.value = res.data.data;
  } else {
    message.error("获取数据失败" + res.data.description);
  }
};

onMounted(() => {
  fetchData();
});

const doDelete = async (id: any) => {
  const res = await deleteUser(id);
  if (res.data.code === 0 && res.data.data) {
    message.success("删除成功");
    fetchData();
  } else {
    message.error("删除失败");
  }
};
</script>
<style scoped>
#userManagePage {
}
</style>
